<template>
	<view>
		<uni-search-bar @confirm="search" placeholder="搜索商品"></uni-search-bar>
		<!-- 分类10-->
		<view v-if="items.templet.category_style == 10 && items.list.length>0" class="cat_content">
			<!--  -->
		</view>
		<view v-else-if="items.templet.category_style == 20 && items.list.length > 0" class="cat_content">
			<!-- 左侧搜索栏 -->
			<scroll-view scroll-y="true" :style="{height:lineHeight + 'px'}" class="cat_content_left">
				<view v-for="(item,i) in items.list" :key = "i" @click="selectNav(i)">
					<text class="type-nav" :class="curId == i?'active':''">{{item.name}}</text>
				</view>
			</scroll-view>
			<!-- 右侧搜索栏 -->
			<scroll-view scroll-y="true"  enable-flex = "true" :style="{height:lineHeight + 'px'}" class="cat_content_right">
				<view class="list">
					<view v-for="(item,i) in items.list" :key = "i" @click="selectItemList(item)" class="right_item">
						<image :src="item.images.file_path" class="right_img"></image>
						<text class="right_title">{{item.name}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	
	export default {
		components:{
			uniSearchBar,
		},
		
		onLoad(){
			
		},
		
		data() {
			return {
				items:{
					"templet":{
						"app_id":10001,
						"app_name":"2号小程序",
						"appkey":"wx289535f41d397084",
						"app_secret":"5cce0bf7de31574455dd33aca3b3cec0",
						"is_delete":0,
						"ver":"1.0.6",
						"image_id":1073,
						"category_style":20,
						"share_title":" 111",
						"user_id":10001,
						"color2":"#fad400",
						"color1":"#E85A71",
						"file_path":null,
						"file_name":null,
						"file_url":null,
					},
					"list":[
						{"id":52,"name":"零食","pid":0,"sort":1,"is_show":1,"image":"44","create_time":"2020-10-30 10:45:07","level":"1","images":{"id":44,"storage":"local","group_id":34,"file_url":"","file_name":"20201030104442ee9637530.jpg","file_size":14165,"file_type":"image","extension":"jpg","is_user":0,"is_delete":0,"user_id":10001,"file_path":"http://localhost:7010/uploads/20201030104442ee9637530.jpg"}},
						{"id":53,"name":"衣服","pid":0,"sort":2,"is_show":1,"image":"45","create_time":"2020-10-30 18:51:47","level":"1","images":{"id":45,"storage":"local","group_id":35,"file_url":"","file_name":"20201030112139de4197779.jpg","file_size":16368,"file_type":"image","extension":"jpg","is_user":0,"is_delete":0,"user_id":10001,"file_path":"http://localhost:7010/uploads/20201030112139de4197779.jpg"}},
						// {"id":54,"name":"衣服","pid":0,"sort":2,"is_show":1,"image":"45","create_time":"2020-10-30 18:51:47","level":"1","images":{"id":45,"storage":"local","group_id":35,"file_url":"","file_name":"20201030112139de4197779.jpg","file_size":16368,"file_type":"image","extension":"jpg","is_user":0,"is_delete":0,"user_id":10001,"file_path":"http://localhost:7010/uploads/20201030112139de4197779.jpg"}}
					],
				},
				lineHeight:0,
				curId:0,
			}
		},
		
		onLoad(){
			
			// 设置高度
			this.setListHeight();
		},
		
		methods: {
			search(e){
				console.log(e);
			},
			selectNav(e){
				console.log(e);
				this.curId = e;
			},
			// 选择对应的项目
			selectItemList(e){
				console.log(e.id);
			},
			// 自适应长宽
			setListHeight(){
				uni.getSystemInfo({
					success: (res) => {
						this.lineHeight = res.windowHeight - 52;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.cat_content{
		display: flex;
		background: #FFFFFF;
		
		.cat_content_left{
			display: flex;
			flex-direction: column;
			width: 200rpx;
			height: 100%;
			background: #F8F8F8;
			
			.type-nav {
			  position: relative;
			  height: 90rpx;
			  line-height: 90rpx;
			  text-align: center;
			  z-index: 10;
			  display: block;
			  font-size: 26rpx;
			 
			  &.active{
			    background: #fff;
			    color: #ff495e;
			    border-right: none;
			    font-size: 28rpx;
			  }
			}
		}
		
		.cat_content_right{
			width: 550rpx;
			height: 100%;
			overflow:hidden;
			
			.list{
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				
				.right_item{
					display: flex;
					flex-direction: column;
					flex-wrap: wrap;
					align-items: center;
					width: calc(550rpx / 3);
					overflow:hidden;
					
					.right_img{
						width: 70%;
						height: calc(550rpx  / 3 * 0.6);
					}
					
					.right_title{
						font-size: 28rpx;
					}
				}
			}
			

		}
	}
</style>
